<template>
  <div class="content">
    <!-- // 标题  -->
    <div class="tt_com" v-for="(item, i) in modules" :key="i">
      <title-more :title="item.title" :url="item.url"></title-more>
      <ul class="com">
        <li v-for="(ele, index) in modules[i].com" :key="index">
          <a
          :href="`#${ele.url}`"
          >
            <re-item
            :id="ele.id"
            :title="ele.title"
            :des="ele.des"
            :countInfo="ele.countInfo"
            :img="ele.img"
            >
                
            </re-item>
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import TitleMore from "@/views/recommend/content/TitleMore.vue";
import ReItem from "@/views/recommend/content/ReItem.vue";

export default {
  name: "ReContent",
  data() {
    return {
      modules: [
        {
          title: "有声书",
          url: "/youshengshu",
          com: [
            {
              id: 43648257,
              img: "https://imagev2.xmcdn.com/storages/7256-audiofreehighqps/68/A5/CMCoOSQDgMVTAAxerABlukfZ.jpg!op_type=3&columns=144&rows=144&magick=webp",
              url: "/album/43648257",
              des: "古风爆笑甜宠",
              title: "王爷追妻：王妃桃花朵朵掐 | 爆笑甜宠 | 免费多人剧",
              countInfo: {
                trackCount: 1063,
                playCount: 178000000,
              },
            },
            {
              id: 43659848,
              img: "https://imagev2.xmcdn.com/storages/a805-audiofreehighqps/A2/21/CMCoOR4DgW8dAAxRpwBl1y-n.jpg!op_type=3&columns=144&rows=144&magick=webp",
              url: "/album/43659848",
              des: "再活一世，她要断情绝爱，报诛心灭族之恨！",
              title: "【免费】凤鸣九天，龙王求亲请排队 | 古言玄幻|复仇",
              countInfo: {
                trackCount: 411,
                playCount: 15932315,
              },
            },
            {
              id: 43659848,
              img: "https://imagev2.xmcdn.com/storages/195f-audiofreehighqps/46/4B/CMCoOSIDgv4qAAG7ewBmUokd.jpg!op_type=3&columns=144&rows=144&magick=webp",
              url: "/album/43659848",
              des: "再活一世，她要断情绝爱，报诛心灭族之恨！",
              title: "【免费】凤鸣九天，龙王求亲请排队 | 古言玄幻|复仇",
              countInfo: {
                trackCount: 411,
                playCount: 15932315,
              },
            },
            {
              id: 43684401,
              img: "https://imagev2.xmcdn.com/storages/8bd8-audiofreehighqps/0D/AA/CMCoOSEDhBIXAAMnZQBmgZWi.jpg!op_type=3&columns=144&rows=144&magick=webp",
              url: "/album/43684401",
              des: "【百大计划】海声参赛作品，请多支持!",
              title: "【百大计划】道友请留步（海声&雨晴 双播）",
              countInfo: {
                trackCount: 65,
                playCount: 674400,
              },
            },
            {
              id: 43721861,
              img: "https://imagev2.xmcdn.com/storages/5217-audiofreehighqps/22/4C/CMCoOSYDjOcWAAmptQBoxOKb.jpg!op_type=3&columns=144&rows=144&magick=webp",
              url: "/album/43684401",
              des: "冷酷总裁vs替嫁新娘",
              title: "霸道总裁的替嫁新娘|vip免费畅听|暖心热恋",
              countInfo: {
                trackCount: 743,
                playCount: 43261800,
              },
            },
          
          ],
        },
        {
          title: "相声评书",
          url: "/xiangsheng",
          com: [
            {
              id: 10109817,
              img: "https://imagev2.xmcdn.com/group33/M00/70/B9/wKgJnVmdP7nj5pMTAAGWbZ3v3TU429.jpg!op_type=3&columns=144&rows=144&magick=webp",
              url: "/album/10109817",
              des: "评书名家为你带来不容错过的非物质文化遗产",
              title: "连丽如：《三国演义》之群雄逐鹿",
              countInfo: {
                trackCount: 30,
                playCount: 533100,
              },
            },
            {
              id: 10109817,
              img: "https://imagev2.xmcdn.com/group33/M00/70/B9/wKgJnVmdP7nj5pMTAAGWbZ3v3TU429.jpg!op_type=3&columns=144&rows=144&magick=webp",
              url: "/album/10109817",
              des: "评书名家为你带来不容错过的非物质文化遗产",
              title: "连丽如：《三国演义》之群雄逐鹿",
              countInfo: {
                trackCount: 30,
                playCount: 324700,
              },
            },
            {
              id: 10785132,
              img: "https://imagev2.xmcdn.com/group30/M06/08/A3/wKgJWlnJ-7Wh9OQQAAEVIjnobyI034.jpg!op_type=3&columns=144&rows=144&magick=webp",
              url: "/album/10785132",
              des: "从未听过！王玥波重磅原创，回馈粉丝！",
              title: "王玥波播讲：书启千年之衰—启功传",
              countInfo: {
                trackCount: 50,
                playCount: 79090000,
              },
            },
            {
              id: 10817349,
              img: "https://imagev2.xmcdn.com/group75/M06/AC/50/wKgO016UAGHg6fAoAAQ46zJ9Oag921.jpg!op_type=3&columns=144&rows=144&magick=webp",
              url: "/album/10817349",
              des: "一票难求的相声live现场，笑点分分钟炸开花",
              title: "2017青曲社“十年一鉴”全国巡演三之票房火Boom爆",
              countInfo: {
                trackCount: 18,
                playCount: 1167400,
              },
            },
            {
              id: 10830718,
              img: "https://imagev2.xmcdn.com/group30/M08/2E/3B/wKgJXlnMfBXhMuTkAADP2Q5Wwmc541.jpg!op_type=3&columns=144&rows=144&magick=webp",
              url: "/album/10830718",
              des: "测试，请勿购买",
              title: "【整张-试听】测试专辑",
              countInfo: {
                trackCount: 54,
                playCount: 2954,
              },
            },
          ],
        },
        {
          title: "儿童",
          url: "/ertong",
          com: [
            {
              id: 15305437,
              img: "https://imagev2.xmcdn.com/storages/2d85-audiofreehighqps/66/A8/GKwRINsFupiMAAMjTQEN45nh.jpg!op_type=3&columns=144&rows=144&magick=webp",
              url: "/album/15305437",
              des: "充满想象力的奇幻冒险",
              title: "格列佛游记|喵博士听名著",
              countInfo: {
                trackCount: 96,
                playCount: 19868200,
              },
            },
            {
              id: 15674331,
              img: "https://imagev2.xmcdn.com/group44/M09/4D/B1/wKgKjFr79rjzEqWkAAC_eU766Mk959.jpg!op_type=3&columns=144&rows=144&magick=webp",
              url: "/album/15674331",
              des: "史上最全的恐龙知识大问答",
              title: "小牛顿恐龙系列100问 | 第四季",
              countInfo: {
                trackCount: 20,
                playCount: 130300,
              },
            },
            {
              id: 15773128,
              img: "https://imagev2.xmcdn.com/group52/M01/A9/8A/wKgLcFwSRh3yfWf1AAGfrgabxkY760.jpg!op_type=3&columns=144&rows=144&magick=webp",
              url: "/album/15773128",
              des: "在晚安故事中，积累文学素养",
              title: "【波比】草莓姐姐睡前故事·哄睡",
              countInfo: {
                trackCount: 210,
                playCount: 8507000,
              },
            },
            {
              id: 15837255,
              img: "https://imagev2.xmcdn.com/group44/M0B/E3/B3/wKgKkVsLsIWCTzU2AAlJ1tSaJCM343.jpg!op_type=3&columns=144&rows=144&magick=webp",
              url: "/album/15773128",
              des: "每次冒险，都是心灵的成长",
              title: "神秘地图：始皇陵中的永生石",
              countInfo: {
                trackCount: 210,
                playCount: 8507000,
              },
            },
            {
              id: 15919139,
              img: "https://imagev2.xmcdn.com/group43/M05/75/56/wKgKjVsY28eD8NLEAAUGAkK1Ukk01.jpeg!op_type=3&columns=144&rows=144&magick=webp",
              url: "/album/15919139",
              des: "顶级新东方名师您的萌娃学英语",
              title: "鼎爸双语故事| 每天10分钟",
              countInfo: {
                trackCount: 310,
                playCount: 33445000,
              },
            },
          ],
        },
        {
          title: "头条",
          url: "/toutiao",
          com: [
            {
              id: 39582399,
              img: "https://imagev2.xmcdn.com/group87/M06/89/3B/wKg5IV8C1M2gyKRPABnTwnbWo2I130.png!op_type=3&columns=144&rows=144&magick=webp",
              url: "/album/39582399",
              des: "每一秒都是财富信息",
              title: "大河财经快讯",
              countInfo: {
                trackCount: 2375,
                playCount: 38891200,
              },
            },
            {
              id: 39671977,
              img: "https://imagev2.xmcdn.com/group82/M0B/B1/7E/wKg5Il8G5PnRQERZAADh200tD1g870.jpg!op_type=3&columns=144&rows=144&magick=webp",
              url: "/album/39671977",
              des: "推倒纸牌屋，直击华盛顿。这是一个信息过剩的时代，也是一个真相迷离的时代。美国",
              title: "张松的美国观察",
              countInfo: {
                trackCount: 146,
                playCount: 14472890,
              },
            },
            {
              id: 40349814,
              img: "https://imagev2.xmcdn.com/group83/M00/BB/73/wKg5I18gCQCBTrYHAAHJkt-YFIk552.jpg!op_type=3&columns=144&rows=144&magick=webp",
              url: "/album/40349814",
              des: "詹俊全网首档个人电台",
              title: "观詹 | 詹俊电台",
              countInfo: {
                trackCount: 189,
                playCount: 11881120,
              },
            },
            {
              id: 40349814,
              img: "https://imagev2.xmcdn.com/storages/88d0-audiofreehighqps/78/57/GKwRIMAFkeIUAAMuBgEDhnLa.jpeg!op_type=3&columns=144&rows=144&magick=webp",
              url: "/album/40349814",
              des: "老胡来了！胡锡进入驻喜马拉雅！每周一到周五上午喜马拉雅独家呈现，胡锡进为全网听众拨开重重迷雾，听",
              title: "大事一锡话 | 胡锡进电台",
              countInfo: {
                trackCount: 377,
                playCount: 390000000,
              },
            },
            {
              id: 40359122,
              img: "https://imagev2.xmcdn.com/group86/M02/4C/EA/wKg5IF8s9smzepkQAAGhEefkj6o046.jpg!op_type=3&columns=144&rows=144&magick=webp",
              url: "/album/40359122",
              des: "张维为通过自己走访数百个国家的经历，以多角度关注世界政局变化，跟进社会热门话",
              title: "维为看世界",
              countInfo: {
                trackCount: 159,
                playCount: 267000000,
              },
            },
          ],
        },
        {
          title: "娱乐",
          url: "/yule",
          com: [
            {
              id: 3493173,
              img: "https://imagev2.xmcdn.com/group31/M0A/25/96/wKgJX1pdzZzjnr3NAAFNJ3rTL_0833.jpg!op_type=3&columns=144&rows=144&magick=webp",
              url: "/album/3493173",
              des: "本节目由喜马拉雅fm独家播出七大主播爆笑吐槽糗事囧闻，包你开心一整",
              title: "糗事播报 | 经典段子",
              countInfo: {
                trackCount: 1665,
                playCount: 1733000000,
              },
            },
            {
              id: 3545175,
              img: "https://imagev2.xmcdn.com/group18/M08/65/92/wKgJKlf6LXTiUCpyAAEitvEVyxU938.jpg!op_type=3&columns=144&rows=144&magick=webp",
              url: "/album/3545175",
              des: "用犀利的视角，看社会。用搞笑的语言，来吐槽。八种声音随便要，搞笑担当夏春瑶无",
              title: "女王有药丨爆笑脱口秀",
              countInfo: {
                trackCount: 462,
                playCount: 128000000,
              },
            },
            {
              id: 3555870,
              img: "https://imagev2.xmcdn.com/group44/M00/AF/BC/wKgKjFswLrvBiTCCAAhPED0zi3Q786.jpg!op_type=3&columns=144&rows=144&magick=webp",
              url: "/album/3555870",
              des: "东北小鲜肉逗贫耍贱，听一次就爱上",
              title: "东北讲笑话",
              countInfo: {
                trackCount: 675,
                playCount: 400000000,
              },
            },

            {
              id: 3577820,
              img: "https://imagev2.xmcdn.com/group7/M06/0A/F4/wKgDX1bMC-Gw6gVKAASsyROZ0xk153.jpg!op_type=3&columns=144&rows=144&magick=webp",
              url: "/album/3577820",
              des: "所提之事，所提之物，在乡野，在身边。最有看头的志怪小说，你没听过的奇谭怪事。",
              title: "奇谭怪事录（燕垒怪谈）",
              countInfo: {
                trackCount: 145,
                playCount: 133000000,
              },
            },
            {
              id: 5113235,
              img: "https://imagev2.xmcdn.com/group20/M06/CD/35/wKgJJ1fF8tbCTpGtAAU3Ej6l4EQ226.png!op_type=3&columns=144&rows=144&magick=webp",
              url: "/album/5113235",
              des: "自己做节目的一点心得分享",
              title: "听十九｜心得分享",
              countInfo: {
                trackCount: 1,
                playCount: 13300,
              },
            },
          ],
        },
      ],
    };
  },
  components: {
    TitleMore,
    ReItem
  },
};
</script>

<style lang="scss" scoped>
.content {
  .tt_com {
    padding: 15px 0;
  }
}
.tt_more{
    padding:  0 15px;
}
.com {
  li {
    padding: 0px 0 0px 15px;
    a {
        display: block;
    }
  }
}

</style>

